<template>
  <div>
    <el-dialog
        :title="form.uid ? '管理员编辑' : '管理员添加'"
        :visible.sync="buffer.isShow"
    >
        <el-form :model="form">
        {{ form }}
         <!-- 管理员角色区域 -->
                <el-form-item label="管理员角色" :label-width="formLabelWidth">
                    <el-select v-model="form.roleid"  placeholder="请选择管理员角色" >
                        <el-option 
                        v-for="item in roleList"
                        :key="item.id"
                        :label="item.rolename" 
                        :value="item.id"
                        ></el-option>
                    </el-select>
                </el-form-item>
        <!-- 管理员名称 -->
        <el-form-item label="管理员名称" :label-width="formLabelWidth">
            <el-input v-model="form.username" autocomplete="off"></el-input>
        </el-form-item>
        <!-- 管理员密码 -->
        <el-form-item label="管理员密码" :label-width="formLabelWidth">
            <el-input v-model="form.password" autocomplete="off" :placeholder="form.uid ? '不填写则不修改': '' "></el-input>
        </el-form-item>

        <!-- 管理员状态 -->
        <el-form-item label="管理员状态" :label-width="formLabelWidth">
            <el-switch
            v-model="form.status"
            active-color="#13ce66"
            inactive-color="#ff4949"
            :active-value="1"
            :inactive-value="2"
            >
            </el-switch>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="buffer.isShow = false">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: ["buffer", "roleList"],
  watch: {
    buffer: {
      handler(newV, oldV) {
        //1.7赋空表单数据
        if (!newV.isShow) {
          //监听窗口关闭
          this.form = {
            roleid: '',//角色id
            username: '',//管理员名称
            password: '',//管理员密码
            status: 1,//管理员状态 1 2
          };
        }
      },
      deep: true,
    },
  },
  data() {
    return {
      form: {
        roleid: '',//角色id
        username: '',//管理员名称
        password: '',//管理员密码
        status: 1,//管理员状态 1 2
      },
      formLabelWidth: "120px",
    };
  },
  methods: {
    //1.提交管理员数据
    submit() {
      // 1.1执行提交操作
      (this.form.uid
        ? this.$api.reqUserEdit(this.form)
        : this.$api.reqUserAdd(this.form)
      )
        .then((res) => {
          // console.log(res)
          //1.2关闭弹窗
          this.buffer.isShow = false;
          //1.3提示用户操作成功
          this.$notify({
            title: "成功",
            message: "操作成功",
            type: "success",
          });
          //1.4更新菜单列表数据
          //子传父通过
          //this.$emit ('父亲传递的自定义事件名字','传递的数据')
          this.$emit("channel", "ok");

        })
        .catch((err) => console.log(err));
    },
   
  },
};
</script>

<style scoped>
</style>
